<template>
  <div class="typingArea" @click="$store.commit('common/set_showLittlePopup')">
    <div class="textarea" contenteditable="true" ref="textarea" @focus="cursorEnd" @keyup.enter="inputMessage" >
    </div>
  </div>
</template>

<script>
import { sendSock } from '@/utils/socketSend'

export default {
  computed: {
    current_contact () {
      return this.$store.state.chatInformation.current_contact
    }
  },
  watch: {
    current_contact: {
      deep: true,
      immediate: true,
      handler (val, oldVal) {
        if (this.$refs && this.$refs.textarea) {
          const draft = this.$refs.textarea.innerText
          this.$store.commit('chatInformation/set_draft', {
            id: oldVal.id,
            idType: oldVal.id_type,
            draft
          })
          this.$store.state.chatInformation.chatInformation.forEach(item => {
            if (item.id === val.id && item.id_type === val.id_type) {
              if (item.draft) {
                this.$refs.textarea.innerText = item.draft
              } else {
                this.$refs.textarea.innerText = ''
              }
            }
          })
          this.$refs.textarea.focus()
        } else {
          const timer = setInterval(() => {
            if (this.$refs && this.$refs.textarea) {
              this.$store.state.chatInformation.chatInformation.forEach(item => {
                if (item.id === val.id && item.id_type === val.id_type) {
                  if (item.draft) {
                    this.$refs.textarea.innerText = item.draft
                  } else {
                    this.$refs.textarea.innerText = ''
                  }
                  this.$refs.textarea.focus()
                }
              })
              clearInterval(timer)
            }
          }, 50)
        }
      }
    }
  },
  methods: {
    inputMessage (e) {
      const msg = e.target.textContent
      e.target.innerText = ''
      if (msg.length) {
        const chatInfo = { type: 'words', msg: msg, isSelf: true, timestamp: +new Date() }
        this.$store.commit('chatInformation/set_topContact', this.current_contact)
        sendSock({
          type: this.current_contact.id_type === 1 ? '2.2.1' : '3.2.1',
          body: {
            id: this.current_contact.id,
            timestamp: +new Date(),
            msg
          }
        })
        this.$store.commit('socket/set_operationReqId', 'sendMessageId')
        this.$store.dispatch('chatInformation/setAddMessage', { message: chatInfo, id: this.current_contact.id, idType: this.current_contact.id_type })
      }
    },
    cursorEnd (event) { // 光标移到最后
      const e = event.srcElement
      if (window.getSelection) {
        const range = window.getSelection()
        range.selectAllChildren(e)
        range.collapseToEnd()
      } else if (document.selection) {
        const range = document.selection.createRange()
        range.moveToElementText(e)
        range.collapse(false)
        range.select()
      }
    }
  }
}
</script>

<style scoped lang="scss">
.typingArea {
  position: absolute;
  top: 0;
  z-index: 9;
  height: 100%;
  width: 100%;
  padding: 43px 24px 10px;
  .textarea {
    background-color: transparent;
    width: 100%;
    height: 100%;
    border: none;
    color: #0D172C;
    font-size: 12px;
    outline: none;
    overflow-y: auto;
    &::-webkit-scrollbar{
      width: 4px;
    }
    &::-webkit-scrollbar-thumb{
      background-color: #d8dee9;
      border-radius: 2px;
    }
  }
}
</style>
